// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const waiter = document.getElementById('waiter');
    const chef = document.getElementById('chef');
    const customer = document.getElementById('customer');
    const dialogContainer = document.getElementById('dialogContainer');
    const closeDialog = document.getElementById('closeDialog');
    const menuPanel = document.getElementById('menuPanel');
    const closeMenu = document.getElementById('closeMenu');
    const overlay = document.getElementById('overlay');
    const dialogOptions = document.querySelectorAll('.dialog-option');
    
    // NPC点击事件
    waiter.addEventListener('click', function() {
        showDialog('Antonio', '👨‍🍳', 'Welcome to Barcelona Restaurant! How may I help you today?', [
            'I\'d like to see the menu, please.',
            'What\'s today\'s special?',
            'Tell me about Spanish cuisine.'
        ]);
    });
    
    chef.addEventListener('click', function() {
        showDialog('Maria', '👩‍🍳', 'Hello! I\'m the head chef here. Our paella is the best in Barcelona!', [
            'How do you make paella?',
            'What ingredients do you use?',
            'Can I learn to cook Spanish food?'
        ]);
    });
    
    customer.addEventListener('click', function() {
        showDialog('Carlos', '🧑', 'Hi there! The food here is amazing. Have you tried their sangria?', [
            'Is this your first time here?',
            'What would you recommend?',
            'Are you from Barcelona?'
        ]);
    });
    
    // 关闭对话框
    closeDialog.addEventListener('click', function() {
        dialogContainer.classList.remove('active');
        overlay.classList.remove('active');
    });
    
    // 关闭菜单
    closeMenu.addEventListener('click', function() {
        menuPanel.classList.remove('active');
        overlay.classList.remove('active');
    });
    
    // 对话选项点击事件
    dialogOptions.forEach(function(option) {
        option.addEventListener('click', function() {
            const text = this.textContent;
            
            // 根据选择的对话选项显示不同的回复
            if (text.includes('menu')) {
                showMenu();
                updateDialog('Here is our menu. We have a variety of traditional Spanish dishes.');
            } else if (text.includes('special')) {
                updateDialog('Today\'s special is Seafood Paella with fresh Mediterranean ingredients. Would you like to try it?', [
                    'Yes, I\'d love to try it!',
                    'What does it contain?',
                    'Maybe something else?'
                ]);
                // 添加新单词到词汇表
                collectVocabulary('Seafood', 'Mediterranean');
            } else if (text.includes('Spanish cuisine')) {
                updateDialog('Spanish cuisine is known for its use of olive oil, garlic, and fresh ingredients. Our most famous dishes include paella, tapas, and sangria.', [
                    'Tell me more about tapas',
                    'How is sangria made?',
                    'Are these dishes difficult to cook?'
                ]);
                // 添加新单词到词汇表
                collectVocabulary('cuisine', 'ingredients');
            } else if (text.includes('make paella')) {
                updateDialog('Paella is made with rice, saffron, and various ingredients like seafood or chicken. The key is cooking it in a wide, shallow pan called a "paellera".', [
                    'Can I get the recipe?',
                    'Where do you source your ingredients?',
                    'Is it difficult to make at home?'
                ]);
                // 收集食谱
                collectRecipe('Paella');
            } else if (text.includes('ingredients')) {
                updateDialog('We use only the freshest ingredients. Our seafood comes from the Mediterranean, our vegetables from local farms, and our spices from traditional suppliers.', [
                    'Do you use organic ingredients?',
                    'Are there any secret ingredients?',
                    'I appreciate your commitment to quality'
                ]);
            } else if (text.includes('learn to cook')) {
                updateDialog('Absolutely! We actually offer cooking classes every Saturday morning. Would you like to sign up for one?', [
                    'Yes, I\'d love to!',
                    'How much does it cost?',
                    'Maybe another time'
                ]);
            } else if (text.includes('first time')) {
                updateDialog('Yes, I\'m visiting Barcelona for the first time. This restaurant was recommended by my hotel. The atmosphere is wonderful!', [
                    'Where are you from?',
                    'How long are you staying?',
                    'What else have you visited in Barcelona?'
                ]);
            } else if (text.includes('recommend')) {
                updateDialog('I would definitely recommend the seafood paella and the sangria. For dessert, try the Crema Catalana - it\'s similar to crème brûlée but with a Spanish twist!', [
                    'Thanks for the recommendation!',
                    'What\'s in Crema Catalana?',
                    'Are there any vegetarian options?'
                ]);
                // 收集食谱
                collectRecipe('Crema Catalana');
            } else if (text.includes('from Barcelona')) {
                updateDialog('No, I\'m actually from Madrid, but I visit Barcelona often for business. The food culture here is amazing compared to other cities in Spain.', [
                    'How does Madrid compare?',
                    'What brings you to Barcelona?',
                    'Do you speak Catalan?'
                ]);
            } else {
                // 默认回复
                updateDialog('That\'s interesting! Is there anything else you\'d like to know about our restaurant or Spanish cuisine?', [
                    'Tell me about the chef',
                    'Do you have any specials today?',
                    'No, thank you'
                ]);
            }
        });
    });
    
    // 显示对话框
    function showDialog(name, avatar, message, options) {
        // 更新对话框内容
        document.querySelector('.dialog-name').textContent = name;
        document.querySelector('.dialog-avatar').textContent = avatar;
        document.querySelector('.dialog-content').textContent = message;
        
        // 更新对话选项
        const optionsContainer = document.querySelector('.dialog-options');
        optionsContainer.innerHTML = '';
        options.forEach(option => {
            const div = document.createElement('div');
            div.className = 'dialog-option';
            div.textContent = option;
            div.addEventListener('click', handleOptionClick);
            optionsContainer.appendChild(div);
        });
        
        // 显示对话框和遮罩
        dialogContainer.classList.add('active');
        overlay.classList.add('active');
    }
    
    // 更新对话内容
    function updateDialog(message, options) {
        document.querySelector('.dialog-content').textContent = message;
        
        if (options) {
            const optionsContainer = document.querySelector('.dialog-options');
            optionsContainer.innerHTML = '';
            options.forEach(option => {
                const div = document.createElement('div');
                div.className = 'dialog-option';
                div.textContent = option;
                div.addEventListener('click', handleOptionClick);
                optionsContainer.appendChild(div);
            });
        }
    }
    
    // 处理对话选项点击
    function handleOptionClick() {
        // 这个函数会被上面的事件监听器调用
        // 具体逻辑已经在上面的事件监听器中实现
    }
    
    // 显示菜单
    function showMenu() {
        menuPanel.classList.add('active');
        overlay.classList.add('active');
    }
    
    // 收集词汇
    function collectVocabulary(...words) {
        // 模拟词汇收集功能
        console.log('收集词汇:', words);
        
        // 更新词汇徽章
        const badge = document.querySelector('.vocabulary-badge span:last-child');
        const currentCount = parseInt(badge.textContent.split(': ')[1]);
        badge.textContent = `已收集: ${currentCount + words.length}`;
        
        // 显示收集提示（实际项目中可以做成动画效果）
        const hint = document.createElement('div');
        hint.className = 'vocabulary-hint';
        hint.textContent = `+${words.length} 新词汇!`;
        hint.style.position = 'absolute';
        hint.style.top = '50px';
        hint.style.right = '10px';
        hint.style.background = 'rgba(0,122,255,0.9)';
        hint.style.color = 'white';
        hint.style.padding = '5px 10px';
        hint.style.borderRadius = '10px';
        hint.style.fontSize = '12px';
        document.body.appendChild(hint);
        
        // 3秒后移除提示
        setTimeout(() => {
            hint.style.opacity = '0';
            hint.style.transition = 'opacity 0.5s';
            setTimeout(() => hint.remove(), 500);
        }, 3000);
    }
    
    // 收集食谱
    function collectRecipe(recipeName) {
        // 创建食谱收集提示
        const recipeCollected = document.createElement('div');
        recipeCollected.className = 'recipe-collected';
        recipeCollected.innerHTML = `
            <div class="recipe-icon">📖</div>
            <div class="recipe-title">${recipeName} 食谱已收集!</div>
            <div class="recipe-desc">你已经解锁了这道美食的制作方法</div>
            <button class="recipe-button">查看食谱</button>
        `;
        document.body.appendChild(recipeCollected);
        
        // 显示收集提示
        setTimeout(() => {
            recipeCollected.classList.add('active');
            
            // 点击按钮关闭提示
            recipeCollected.querySelector('.recipe-button').addEventListener('click', () => {
                recipeCollected.classList.remove('active');
                setTimeout(() => recipeCollected.remove(), 500);
            });
            
            // 5秒后自动关闭
            setTimeout(() => {
                recipeCollected.classList.remove('active');
                setTimeout(() => recipeCollected.remove(), 500);
            }, 5000);
        }, 500);
    }
    
    // 初始化
    function init() {
        // 添加脉冲动画效果到NPC
        document.querySelectorAll('.npc').forEach(npc => {
            npc.querySelector('.npc-icon').classList.add('pulse');
        });
    }
    
    // 调用初始化函数
    init();
});